<template>
  <!-- 购物车 -->
  <view>
    <c-navBar title="购物车" isBack isTran is-perch></c-navBar>
    <view class="ca-bg"></view>
    <view class="nav" v-if="cartList.length != 0">
      <view @click="management = !management">
        <view v-show="!management" class="na-manage">管理</view>
        <view v-show="management" class="na-complete">完成</view>
      </view>
    </view>

    <view class="main">
      <view
        class="ma-order"
        v-for="(v, i) in cartList"
        :key="i"
        @click="handleVal(v)"
      >
        <view class="check ma-check" @click.stop="ezchangeTab(v)" >
          <view v-show="!v.tabShow" class="ch-no" :style="{background: v.ifSelect?'white':'rgb(199.5, 201, 204)'}"></view>
          <image
            v-show="v.tabShow"
            src="@/static/tabbar/opt.png"
            mode=""
          ></image>
        </view>
        <image class="ma-img" :src="v.picture" mode=""></image>
        <view class="right-box">
          <view class="ri-title otw">{{ v.title }}</view>
          <view class="ri-speci">已选：{{ v.propertiesName }}</view>
          <view class="df aic jcsb">
            <view class="ri-price"
              ><text>￥</text
              >{{ userType == 0 ? v.price : v.memberPrice }}</view
            >
            <u-number-box
              v-model="v.quantity"
              disabledInput
              :min="1"
              @minus="handleTab(v, 2)"
              @plus="handleTab(v, 1)"
              @change="valChange"
            ></u-number-box>
          </view>
        </view>
      </view>
    </view>

    <view v-if="cartList.length != 0">
      <view v-if="!management" class="total">
        <view class="na-all">
          <view class="check" @click="allTabBtn">
            <view v-show="!allTab" class="ch-no"></view>
            <image
              v-show="allTab"
              src="@/static/tabbar/opt.png"
              mode=""
            ></image>
          </view>
          <view>全选</view>
          <view class="to-sum"
            >合计： <text>￥{{ totalPrice }}</text></view
          >
        </view>

        <view class="to-btn" @click="goEndAccounts"
          >去结算<text v-show="number">({{ number }})</text></view
        >
      </view>

      <view v-if="management" class="total">
        <view class="na-all">
          <view class="check" @click="allTabBtn">
            <view v-show="!allTab" class="ch-no"></view>
            <image
              v-show="allTab"
              src="@/static/tabbar/opt.png"
              mode=""
            ></image>
          </view>
          <view>全选</view>
          <view class="to-sum">合计：{{ number }}</view>
        </view>

        <view class="to-btn to-del" @click="delGoodsFn">删除</view>
      </view>
    </view>

    <view v-if="cartList.length == 0" class="defaultBox">
      <image src="/static/empty/icon5.png" mode=""></image>
      <view class="tips">购物车空空如也~</view>
      <view @click="goShoping" class="goShop"> 去购物 </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      allTab: false,
      cartList: [],
      totalPrice: 0,
      number: 0,
      management: false,
      currenVal: {},
      userType: 0,
    };
  },
  watch: {
    cartList: {
      handler(newName, oldName) {
        this.sum();
      },
      immediate: true,
      deep: true,
    },
  },
  onLoad() {
    // this.getFrontendGoodsCartFn()
  },
  onShow() {
    let lifeData = uni.getStorageSync("lifeData");
    if (lifeData) {
      this.getMembership();
      this.getFrontendGoodsCartFn();
      this.getCartNum();
    }
  },
  methods: {
    // 获取购物车数据
    getCartNum() {
      this.$api.getCartNumY().then((res) => {
        // console.log(res, '获取购物车数据');
        if (res.data > 0) {
          uni.setTabBarBadge({
            index: 3,
            text: String(res.data),
          });
        } else {
          uni.removeTabBarBadge({
            index: 3,
          });
        }
      });
    },

    // 获取会员等级
    getMembership() {
      this.$api.getUserTypeY().then((res) => {
        // console.log(res, '会员dengj');
        // this.userType = res.data;
        this.userType = 1;
      });
    },
    // 获取购物车列表
    async getFrontendGoodsCartFn() {
      const { data } = await this.$api.frontendGoodsCartY({
        pageSize: 99,
      });
      // console.log('购物车列表data', data.list);
      this.cartList = data.list.map((v) => {
        this.$set(v, "tabShow", false);
        return v;
      });
    },
    // 去购物
    goShoping() {
      uni.reLaunch({
        url: "/pages/tabbar/home",
      });
    },
    // 点击按钮
    handleVal(e) {
      console.log("e", e);
      this.currenVal = e;
      uni.navigateTo({
        url: "/pages/goods/pages/goodsDetails?id=" + e.spuId,
      });
    },
    // 去结算
    goEndAccounts() {
      let ids = this.cartList.filter((v) => v.tabShow).map((item) => item);
      console.log(ids);
      if (ids.length < 1) {
        return uni.showToast({
          icon: "none",
          title: "您还没有选择商品哦",
        });
      }
      uni.navigateTo({
        url:
          "/pages/order/pages/confirmOrder?type=2&&cartList=" +
          JSON.stringify(ids),
      });
    },
    // 修改
    valChange(e) {},
    // 增加商品 - 减少商品
    async handleTab(val, type) {
      const { data } = await this.$api.updateCartNumY({
        id: val.id,
        type,
        num: 1,
      });
    },
    // 删除商品
    delGoodsFn() {
      let ids = this.cartList.filter((v) => v.tabShow).map((item) => item.id);
      console.log(ids);
      if (ids.length < 1) {
        return uni.showToast({
          icon: "none",
          title: "您还没有选择商品哦",
        });
      }
      uni.showModal({
        title: "提示",
        content: "是否确定删除选中商品",
        confirmColor: "#2AD03D", // 删除字体的颜色
        cancelColor: "#606166", // 取消字体的颜色
        success: async (res) => {
          if (res.confirm) {
            const { data, code } = await this.$api.deleteCartY(ids);
            if (code == 200) {
              uni.showToast({
                title: "删除成功",
              });
              this.getFrontendGoodsCartFn();
              this.getCartNum();
            }
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 计算总价
    sum() {
      let res = 0; //总价
      let subtotal = 0; //小计
      this.number = 0;
      this.allTab = this.cartList.every((v, i) => {
        return v.tabShow;
      });
      this.cartList.forEach((v, i) => {
        if (v.tabShow) {
          subtotal++;
          res +=
            this.userType == 0
              ? Number(v.price) * v.quantity
              : Number(v.memberPrice) * v.quantity;
          console.log("res", res);
        }
      });
      this.totalPrice = res.toFixed(2);
      this.number = subtotal;
    },
    // 全选
    allTabBtn() {
      this.allTab = !this.allTab;
      this.cartList.forEach((v, i) => {
        if (this.allTab && v.ifSelect) {
          v.tabShow = true;
        } else {
          v.tabShow = false;
        }
      });
    },
    // 儿子选择
    ezchangeTab(v) {
		if (!v.ifSelect) {
			uni.showToast({
			  icon: "none",
			  title: "库存不足",
			});
			return;
		}
      v.tabShow = !v.tabShow;
      console.log("v.tabShow", v.tabShow);
    },
  },
};
</script>

<style>
page {
  background: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.ca-bg {
  width: 750rpx;
  height: 320rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.check {
  margin-right: 8rpx;
  flex: none;

  &.ma-check {
    height: 160rpx;
    display: flex;
    align-items: center;
  }

  .ch-no {
    width: 28rpx;
    height: 28rpx;
    border-radius: 50%;
    border: 1rpx solid rgb(115.2, 117.6, 122.4);
    box-sizing: border-box;
  }

  image {
    width: 28rpx;
    height: 28rpx;
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;

  // .na-all {
  // 	display: flex;
  // 	align-items: center;
  // 	font-size: 28rpx;
  // 	color: #666666;
  // }

  .na-manage {
    font-size: 28rpx;
    color: #333333;
    line-height: 28rpx;
  }

  .na-complete {
    font-size: 28rpx;
    font-weight: bold;
    color: #2ad03d;
  }
}

.main {
  height: calc(100vh - 300rpx);
  padding: 0 20rpx 100rpx;
  box-sizing: border-box;
  overflow: scroll;

  .ma-order {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 20rpx 16rpx 28rpx;
    display: flex;
    align-items: center;

    .ma-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin: 0 28rpx 0 16rpx;
      flex: none;
    }

    .right-box {
      width: 440rpx;

      .ri-title {
        font-size: 32rpx;
        color: #333333;
      }

      .ri-speci {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        margin: 20rpx 0 24rpx;
      }

      .ri-price {
        font-size: 36rpx;
        font-weight: bold;
        color: #ee3b31;

        text {
          font-size: 20rpx;
        }
      }
    }
  }
}

.total {
  width: 750rpx;
  height: 128rpx;
  background: #ffffff;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: 0rpx;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .na-all {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #666666;

    .to-sum {
      font-size: 36rpx;
      font-weight: bold;
      color: #343840;
      margin-left: 30rpx;

      text {
        color: #ee3b31;
      }
    }
  }

  .to-btn {
    width: 216rpx;
    height: 80rpx;
    background: #ee3b31;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
  }
}

.defaultBox {
  image {
    width: 320rpx;
    height: 170rpx;
  }

  .tips {
    font-size: 32rpx;
  }

  .goShop {
    margin: 0 auto;
    margin-top: 40rpx;
    width: 220rpx;
    height: 60rpx;
    background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 78rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
